<template>
  <div class="cars_list">
    <div class="top">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="区域">
          <cityArea></cityArea>
        </el-form-item>
        <el-form-item label="类型">
          <!-- <el-select placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="禁启用">
          <!-- <el-select placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="关键字">
          <!-- <el-select placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="$router.push('/carsAdd')"
            >新建停车场</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <el-table
        border
        cenent
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="停车场名称" width="200">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="类型" width="200">
        </el-table-column>
        <el-table-column
          prop="address"
          label="区域"
          show-overflow-tooltip
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="可停放的车辆"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="address" label="禁启用" show-overflow-tooltip>
          <template slot-scope="">
            <el-switch active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="查看位置" show-overflow-tooltip>
          <template slot-scope="">
            <el-button type="bottom" size="small">查看位置 </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" show-overflow-tooltip>
          <template slot-scope="">
            <el-button type="bottom" size="small">查看 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        cityArea: "",
        user: "",
        region: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          zip: 200333,
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    onSubmit() {
      console.log("submit!");
    },
  },

  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.cars_list {
  width: 100%;
  height: 100%;
  // .top {
  //   display: flex;
  //   margin-right: 30px;
  //   width: 100%;
  //   .el-form {
  //     display: flex;
  //     justify-content: space-between;
  //   }
  // }
}
</style>